<link rel="stylesheet" href="ccay/example/demo.css"	type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<!--[if lte IE 8]><script type="text/javascript" src="ccay/web/resource/ui/plugins/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="ccay/web/resource/ui/plugins/flot/jquery.flot.js" charset="utf-8" ></script>
<script type="text/javascript" src="ccay/web/resource/ui/plugins/flot/jquery.flot.pie.js" charset="utf-8" ></script>
<script type="text/javascript" src="ccay/web/resource/ui/ccay.ui.chart.js" charset="utf-8" ></script>
<script type="text/javascript" src="ccay/example/ui/dataBind/dataBindDemo.js" />
<div id="dataBindDemo">
	<div title="API">
		<div>
		  <h2>ops.lines属性说明：</h2>
		   <div style='padding-left:30px'>
			<form id="param" class="init ccay-form">
				<div class="ccay-form-body ccay-form-custom">		
					<ul>
						<li class="ccay-form-row">
							<samp><h3>初始化属性</h3></samp> 
					    	<span class="ccay-form-input">
					    		<h3>描述</h3> 
					    	</span>
						</li>
						<li class="ccay-form-row">
							<samp>data: rawdata</samp> 
					    	<span class="ccay-form-input">
					    		数据,[[1,100],[2,300],[3,500]]
					    	</span>
						</li>
						<li class="ccay-form-row">
							<samp>xField: string</samp> 
					    	<span class="ccay-form-input">ajax方式返回的数据中x坐标的设置</span>
						</li>
						<li class="ccay-form-row">
							<samp>yField: string</samp> 
					    	<span class="ccay-form-input">ajax方式返回的数据中y坐标的设置</span>
						</li>
						<li class="ccay-form-row">
							<samp>fnSetData: function</samp> 
					    	<span class="ccay-form-input">ajax方式返回的数据中自定义数据方法，fnSetData(item)，item数据项         <br> 例子：fnSetData:function(item){
							 return [item.month,item.income -item.profit]
							 }</span>
						</li>
						<li class="ccay-form-row">
							<samp>ajax:null</samp> 
					    	<span class="ccay-form-input">ajax设置</span>
						</li>
						<li class="ccay-form-row">
							<samp>show: boolean</samp> 
					    	<span class="ccay-form-input">是否显示   true表示显示  false 表示不显示</span>
						</li>
						<li class="ccay-form-row">
							<samp>lineWidth: number</samp> 
					    	<span class="ccay-form-input">line的宽度设置</span>
						</li>
						<li class="ccay-form-row">
							<samp>fill: boolean or number</samp> 
					    	<span class="ccay-form-input">是否使用颜色填充显示   </span>
						</li>
						<li class="ccay-form-row">
							<samp>fillColor: null or color/gradient</samp> 
					    	<span class="ccay-form-input">填充颜色   null表示不填充颜色  color和gradient表示填充黑色   </span>
						</li>
						<li class="ccay-form-row">
							<samp>steps: boolean</samp> 
					    	<span class="ccay-form-input">是否以阶段显示    true表示显示  false 表示不显示 </span>
						</li>
						
					</ul>
				</div>
			</form>
			</div>
		</div>
		
	</div>
	
	<div title="固定数据源" tabid="demo1">
		<h4><span>Chart 固定数据源</span></h4>
		<div id="chart"></div>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html1'>
&lt;h4>&lt;span>Chart 数据过滤模式&lt;/span>&lt;/h4>
&lt;div id=chart11>&lt;/div>
			</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js1'>
$(function(){ 
  var lines = [{data: [[0, 3], [4, 8], [8, 5], [9, 13]], label: 'line1'},
	           {data: [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]], label: 'line2'}];
	
	
  $('#chart11').chart({
	lines:lines
  });
});
			</pre>
		</div>
		<div>
			<a onclick="Ccay.example.openTry('#dataBindDemo',$('#js1').html(),$('#html1').html())">试一试</a>
		</div>
	</div>
	
	<div title="设置字段模式" tabid="demo2">
		<h4><span>Chart 设置字段模式</span></h4>
		<div id=chart2></div>
		
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html2'>
	&lt;h4>&lt;span>Chart 设置字段模式&lt;/span>&lt;/h4>
	&lt;div id=chart22>&lt;/div>
			</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js2'>
var datas = [
             {month:1,profit:2000,total:4000},
             {month:2,profit:4000,total:5000},
             {month:3,profit:6000,total:9000},
             {month:4,profit:10000,total:15000},
             {month:5,profit:3000,total:7000},
             {month:6,profit:2000,total:5000},
             {month:7,profit:1000,total:4000},
             {month:8,profit:5000,total:8000}
            ];

  $('#chart22').chart({
   lines:[{label: '月度利润',xField:'month',yField:'profit',lines:{fill:true,steps: true}},
	       {label: '月度销售额',xField:'month',yField:'total',lines: { fill: true,steps: true }},
	       {label: '月度支出',lines: { fill: true,steps: true },fnSetData:function(item){
	    	   return [item.month,item.profit - item.total]
	       } }
	],
	ajax:{
	   getData:function(success){
		success(datas);
	  }
   }
});
			</pre>
		</div>
		<div>
			<a onclick="Ccay.example.openTry('#dataBindDemo',$('#js2').html(),$('#html2').html())">试一试</a>
		</div>
	</div>
	
	<div title="数据过滤模式" tabid="demo3">
		<h4><span>Chart 数据过滤模式</span></h4>
		<div id="chart3"></div>
		<br>
		
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html3'>
&lt;h4>&lt;span>Chart 数据过滤模式&lt;/span>&lt;/h4>
&lt;div id=chart33>&lt;/div>
			</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js3'>
 $('#chart33').chart({
  	width:600,
		lines:[{label: '2011利润',bars: { show: true }},
	       {label: '2012利润',bars: { show: true }}
	], 
	ajax:{
		url:'ccay/example/ui/chart/datas.json',
		filter :function(data){
			var result = data.result,year,date,line1 =[],line2=[];
			
			$.each(result,function(i,item){
				date = item.date.toDate();
				if(date.getYear() == 2011)
					line1.push([date.getMonth() + 1,item.profit]);
				else
					line2.push([date.getMonth() + 1,item.profit]);
			});
			return [line1,line2];
		}
	},
	setting:{
		xaxis:{tickSize:1,min:1,max:12}
	}
 }); 
			</pre>
		</div>
		<div>
			<a onclick="Ccay.example.openTry('#dataBindDemo',$('#js3').html(),$('#html3').html())">试一试</a>
		</div>
	</div>
	
	<div title="试一试" tabid="trytab" >
		    <fieldset class='ccay-demo'>
		    <legend ><h2>代码区</h2></legend>
		      <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 
				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:250px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
            </fieldset>
	        <fieldset class='ccay-demo'>
	          <legend ><h2>结果区</h2></legend>
				<div>
					<div style="overflow:auto;" id="demoMainPanel"></div>
				</div>
	        </fieldset>
     </div>
  	
	<div title="FAQ">
	  	<form class="init ccay-form">
			<div class="ccay-form-body ccay-form-custom">
		    <ul>                     
		        <li class="ccay-form-row">
		           <samp><h3>问题</h3></samp>
		           <span class="ccay-form-input">
		               <h3>解决方案</h3>
		           </span>
		        </li>
		        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
		        <li class="ccay-form-row">
		            <samp class="i18n" i18nKey=""></samp>                          
		            <span class="ccay-form-input"></span>
		        </li>  
		    </ul>
			</div>
	  	</form> 
	</div>
</div>
